<!DOCTYPE html>
<html lang="en">
<style>
	.box-body{
		margin-top: 50px;
	}
	.ms{
		margin-top: 15px;
	}

</style>
{include file="Public/head"}
<link href="/static/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<body data-type="widgets">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">
	{include file='Public:header'}
	{include file='Public:menu2'}

	<!-- 内容区域 -->
	<div class="tpl-content-wrapper">
		<div class="row-content am-cf">
			<div class="row">
				<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
					<div class="widget am-cf">
						<div class="widget-head am-cf">
							<div class="widget-title  am-cf">销售额走势</div>
						</div>
						<div class="widget-body  am-fr">
							<section class="content">
								<div class="row">
									<div class="col-md-12">
										<div class="box box-info">
											<div class="box-header with-border">
												<div class="row">
													<div class="col-md-10">
														<form action="" method="post">
															<div class="col-xs-5">
																<div class="input-group margin">
																	<div class="input-group-addon">
																		选择时间  <i class="fa fa-calendar"></i>
																	</div>
																	<input type="text" class="form-control pull-right" name="start_time" value="{$start_time}" id="start_time">
																</div>
															</div>
															<div class="col-xs-1"><input class="btn btn-block btn-info margin" type="submit" value="确定"></div>
														</form>
													</div>
												</div>
											</div>
											<div class="box-body">
												<div class="row">
													<div class="col-sm-3 col-xs-6">
														今日销售总额：￥<empty name="today.today_amount"><else/>{$today.today_amount}</empty>
													</div>
													<div class="col-sm-3 col-xs-6">
														人均客单价：￥{$today.sign}
													</div>
													<div class="col-sm-3 col-xs-6">
														今日订单数：{$today.today_order}
													</div>
													<div class="col-sm-3 col-xs-6">
														今日取消订单：{$today.cancel_order}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="box box-primary">
											<div class="box-body">
												<div class="chart">
													<div id="statistics" style="height: 400px;"></div>
												</div>
											</div>
										</div>
									</div>
									<div class="col-sm-12">
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title"><i class="fa fa-list"></i> 销售表格概览</h3>
											</div>
											<div class="panel-body">
												<table id="list-table" class="table table-bordered table-striped">
													<thead>
													<tr>
														<th>时间</th>
														<th>订单数</th>
														<th>销售总额</th>
														<th>客单价</th>
														<th>查看</th>
													</tr>
													</thead>
													<tbody>
													{foreach name="list" item="vo" key="k" }
														<tr role="row" align="center">
															<td>{$vo.day}</td>
															<td>{$vo.order_num}</td>
															<td>{$vo.amount}</td>
															<td>{$vo.sign}</td>
															<td><a href="{:url('Report/saleList',array('begin'=>$vo['day'],'end'=>$vo['end']))}">订单列表</a></td>
														</tr>
													{/foreach}
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</section>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
</body>
{include file='Public:script'}
<!--时间-->
<script src="/static/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>


<script src="/static/js/echart/echarts.min.js" type="text/javascript"></script>
<script src="/static/js/echart/macarons.js"></script>
<script src="/static/js/echart/china.js"></script>


<script>
    var res = {$result};
    var myChart = echarts.init(document.getElementById('statistics'),'macarons');
    option = {
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        legend: {
            data:['交易金额','订单数','客单价']
        },
        xAxis : [
            {
                type : 'category',
                data : res.time
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                axisLabel : {
                    formatter: '{value} ￥'
                }
            },
            {
                type : 'value',
                name : '客单价',
                axisLabel : {
                    formatter: '{value} ￥'
                }
            }
        ],
        series : [
            {
                name:'交易金额',
                type:'bar',
                data:res.amount
            },
            {
                name:'订单数',
                type:'bar',
                data:res.order
            },
            {
                name:'客单价',
                type:'line',
                yAxisIndex: 1,
                data:res.sign
            }
        ]
    };
    myChart.setOption(option);



    $(document).ready(function() {
        $('#start_time').daterangepicker({
            format:"YYYY-MM-DD",
            singleDatePicker: false,
            showDropdowns: true,
            minDate:'2016-01-01',
            maxDate:'2030-01-01',
            startDate:'2016-01-01',
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract('days', 1), moment().subtract('days', 1)],
                '最近7天': [moment().subtract('days', 6), moment()],
                '最近30天': [moment().subtract('days', 29), moment()],
                '上一个月': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            opens: 'right',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });
    });

</script>
</html>